<template>
  <div class="search-box">
    <el-form ref="info" :model="info" class="botLeft  flex-wrap " label-width="110px">
      <el-form-item class="elFormItem" label="操作">
        <el-input clearable v-model.trim="info.operationType" placeholder="请输入" maxlength="100" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item class="elFormItem" label="说明">
        <el-input clearable v-model.trim="info.description" placeholder="请输入" maxlength="100" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item class="elFormItem" label="操作人">
        <el-input v-model.trim="info.operatorName" clearable placeholder="请输入" maxlength="100" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item class="elFormItem" label="操作时间">
        <el-date-picker style=" width: 100%;" v-model="dateSelect" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="left">
        </el-date-picker>
      </el-form-item>

      <el-form-item class="elFormItem" style="width:auto;" label="">
        <el-button @click="searchTicket('search')" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button @click="searchTicket('empty')">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import pickerOptions from "@/components/js/pickerOptions.js";
export default {
  data() {
    return {
      saveSearchFrom: {}, //保存点击搜索的表单
      dateSelect: "",
      pickerOptions: pickerOptions,
      info: {} //搜索表单信息
    };
  },
  methods: {
    //搜索
    searchTicket(item) {
      if (item == "search") {
        if (this.dateSelect) {
          this.info.startTime = new Date(this.dateSelect[0]).getTime();
          this.info.endTime = new Date(this.dateSelect[1]).getTime();
        }
      }
      if (item == "empty") {
        this.info = {};
        this.dateSelect = "";
      }
      let saveSearchFrom = {
        ...this.info
      };
      this.saveSearchFrom = JSON.parse(JSON.stringify(saveSearchFrom));
      this.$emit("getTableData");
    }
  }
};
</script>
